<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="../common/vue.min.js" type="text/javascript"></script>
    <script src="../common/vue-router.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <h1>Hello App!</h1>
    <a v-link="{ path: '/foo' }">Go to /foo</a> |
    <a v-link="{ path: '/foo/bar' }">Go to /foo/bar</a> |
    <a v-link="{ path: '/foo/user/reese' }">Go to /foo/user/reese</a>
    <!-- 路由外链 -->
    <router-view></router-view>

    <hr/>
    你可以直接在组件模板中使用 $route 。例如：
    <div>
        <p>当前路径: {{$route.path}}</p>
        <p>当前路由参数: {{$route.params}}</p>
    </div>

</div>

<script>
    // 定义组件
    var Foo = Vue.extend({
        template: '<div class="foo">' +
        '<h2>say hi foo</h2>' +
        '<router-view></router-view>' +//嵌套的外链
        '</div>'

    })

    var Bar = Vue.extend({
        template: '<p>This is bar!</p>'
    })


    // 路由器需要一个根组件。
    // 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板
    var App = Vue.extend({})

    // 创建一个路由器实例
    // 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
    var router = new VueRouter()

    //TODO 加上这个后<router-view>不起作用了
//    router.beforeEach(function(transition){
//        console.log(transition)
//        if(transition.to.auth){
//            console.log("身份验证开始...")
//            console.log(transition.to);
//        }
//    })

    // 定义路由规则
    // 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
    // 创建的组件构造函数，也可以是一个组件选项对象。
    // 稍后我们会讲解嵌套路由
    router.map({
        '/foo': {
            component: Foo,
            //在/foo下设置一个子路由
            subRoutes: {
                '/': {
                    // 当匹配到 /foo 时，这个组件会被渲染到 Foo 组件的 <router-view> 中。
                    // 为了简便，这里使用了一个组件的定义
                    component: {
                        template: '<p>Default sub view for Foo</p>'
                    }
                },
                '/bar': {
                    //当匹配到/foo/bar时，会在Foo's <router-view>内渲染
                    //一个Bar组件
                    component: Bar
                },
                '/user/:username':{
                    component: {
                        template: '<p>say hi {{$route.params.username}}</p>'
                    }
                }

            },
            auth:true
        }
    })



    // 现在我们可以启动应用了！
    // 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
    router.start(App, '#app')
</script>
</body>
</html>